<style>
    html,
    body
    {
        height:100%;
        margin:0;
        padding:0;
        overflow:hidden;
    }

    #mainCont,
    #mentCont
    {
        height:100%;
    }

    #mentCont
    {
        border-width: 0;
    }
</style>

<div id="mainCont">
    <div id="topCont">
        Kendo UI
        <select id="themeSelect">
            <option value="default">default</option>
            <option value="blueopal">blueopal</option>
            <option value="bootstrap">bootstrap</option>
            <option value="silver">silver</option>
            <option value="uniform">uniform</option>
            <option value="metro">metro</option>
            <option value="black">black</option>
            <option value="metroblack">metroblack</option>
            <option value="highcontrast">highcontrast</option>
            <option value="moonlight">moonlight</option>
            <option value="flat">flat</option>
            <option value="material">material</option>
            <option value="mateiralblack">mateiralblack</option>
            <option value="fiori">fiori</option>
            <option value="office365">office365</option>
            <option value="nova">nova</option>
        </select>

    </div>
    <div>
        <div id="mentCont">
            <div>

                <?php echo $this->menu->getMenus(); ?>
            </div>
            <div id="bodyCont">
                <div ng-view=""></div>
            </div>
        </div>
    </div>
    <div>
        Footer
    </div>
</div>

<script>
    $(function() {
        //布局
        $("#mainCont").kendoSplitter({
            orientation: "vertical",
            panes: [
                { collapsible: false, size: "60px",resizable:false},
                { collapsible: false },
                { collapsible: false, resizable: false, size: "10%" }
            ]
        });

        $("#mentCont").kendoSplitter({
            panes: [
                { collapsible: true, size: "200px",max:'250px'},
                { collapsible: false }
            ]
        });
        //初始化左侧菜单
        $("#menuBar").kendoPanelBar({
            animation: {
                collapse: {
                    duration: 1000,
                    effects: "fadeOut"
                },
                expand: {
                    duration: 500,
                    effects: "expandVertical fadeIn"
                }
            }
        });
    });
</script>

<script src="/js/users/app.js"></script>
<script src="/js/users/controllers.js"></script>

<script>
    $("#themeSelect").on("change",function(){
        $("#themes").attr("href","/dep/kendo/styles/kendo."+$(this).val()+".min.css");
    });
</script>